<template>
  <div class="wrong-questions-container">
    <UnifiedPractice
      ref="practiceRef"
      module="wrongQuestions"
      fetchQuestionsApi="/api/wrong-question/practice"
      submitAnswersApi="/api/wrong-question/submit"
      @practice-completed="onPracticeCompleted"
      :showAnswerCard="true"
      :showTimer="true"
      :trackWrongQuestions="true"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import UnifiedPractice from '@/components/UnifiedPractice.vue';

// 练习组件引用
const practiceRef = ref<any>(null);

// 练习完成回调
const onPracticeCompleted = () => {
  ElMessage.success('练习完成！');
};

// 组件挂载后自动开始练习
onMounted(() => {
  // 给一个短暂的延时，确保组件完全渲染
  setTimeout(() => {
    if (practiceRef.value) {
      practiceRef.value.startPractice();
    }
  }, 100);
});
</script>

<style scoped>
.wrong-questions-container {
  min-height: 100vh;
  background: #f5f7fa; /* 使用浅灰色背景替代蓝色渐变 */
  padding: 20px;
}
</style>